<template>
	<view class="recommendations">
		<view class="title">
			请填写反馈信息
		</view>
		<view class="content">
			<view class="item" @click="serverStore.flagshow = true">
				<view class=" left">
					投诉类型
				</view>
				<view class="right" style="color: #808080;">
					请选择投诉类型
				</view>
				<view class="icon">
					<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height: 40rpx;">
					</image>
				</view>
			</view>
			<view class="item">
				<view class="left">
					问题描述
				</view>
				<view class="right" style="height: 100rpx;">
					<input type="text" placeholder="请描述您的问题" />
				</view>
				<view class="icon">

				</view>
			</view>
			<view class="item">
				<view class="left">
					投诉人姓名
				</view>
				<view class="right">
					<input type="text" value="江峰" />
				</view>
				<view class="icon">

				</view>
			</view>
			<view class="item">
				<view class="left">
					手机号码
				</view>
				<view class="right">
					<input type="text" value="15908880760" />
				</view>
				<view class="icon">

				</view>
			</view>
		</view>
		<button class="Btn" @click="entrys">提交</button>
	</view>
	<MaskAlertVue class="maskalertvue">
		<view class="Times">
			<view class="title">
				选择投诉类型
				<view class="offalert" @click="serverStore.flagshow = false">
					×
				</view>
			</view>
			<view class="content">
				<view class="item" @click="serverStore.flagshow = false">
					物业服务
				</view>
				<view class="item" @click="serverStore.flagshow = false">
					公共设施
				</view>
				<view class="item" @click="serverStore.flagshow = false">
					其他
				</view>
			</view>
		</view>
	</MaskAlertVue>
</template>

<script setup>
	import MaskAlertVue from '../../../../components/MaskAlert.vue';
	import {
		useServerStore
	} from '../../../../stores/serverStore';
	const serverStore = useServerStore();
	const entrys = () => {
		uni.showToast({
			title: '提交成功'
		})
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/server/server'
			})
		}, 1000)
	}
</script>

<style lang="scss">
	.maskalertvue {
		.Times {
			padding-bottom: 50rpx;

			.content {
				.item {
					border-top: 2rpx solid #f2f2f2;
					text-align: center;
					padding: 30rpx 0rpx;
				}
			}

			.title {
				text-align: center;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				position: relative;

				.offalert {
					position: absolute;
					right: 15rpx;
					top: -10rpx;
					color: #aaaaaa;
					font-size: 40rpx;
				}
			}
		}
	}

	.recommendations {
		padding: 30rpx;

		.Btn {
			background-color: #006eff;
			color: white;
			font-size: 28rpx;
			margin-top: 60rpx;
		}

		.title {
			border-bottom: 2rpx solid #f2f2f2;
			padding-bottom: 30rpx;
			font-size: 26rpx;
			color: #aaaaaa;
		}

		.item {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			border-bottom: 2rpx solid #f2f2f2;
			padding-bottom: 30rpx;

			.left {
				width: 150rpx;
				font-size: 30rpx;
			}

			.right {
				width: 350rpx;
				font-size: 28rpx;
			}

			.icon {
				width: 40rpx;
			}
		}
	}
</style>